/*
 * @Author: hongbin
 * @Date: 2022-12-02 16:05:28
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-03 10:49:46
 * @Description:消息
 */

import { FC, useEffect, useRef } from "react";
import styled from "styled-components";
import { ITemporaryMessage } from ".";
import { useAuth } from "../../../context/AuthProvide";

interface IProps {
    list: ITemporaryMessage[];
}

const MessageList: FC<IProps> = ({ list }) => {
    const {
        user: { _id },
    } = useAuth();
    const ref = useRef<HTMLDivElement>(null);

    useEffect(() => {
        ref.current?.scrollTo(0, ref.current.scrollHeight);
    }, [list]);

    return (
        <Container ref={ref}>
            {list.map((msg, index) => (
                <div
                    key={msg.sender + index}
                    style={{
                        justifyContent: msg.sender == _id ? "flex-end" : "flex-star",
                    }}
                >
                    <span>{msg.content}</span>
                </div>
            ))}
        </Container>
    );
};

export default MessageList;

const Container = styled.div`
    height: 20vh;
    display: flex;
    flex-direction: column;
    overflow: hidden scroll;
    background: #19570d;
    font-size: 1.3vw;

    & > div {
        display: flex;
        span {
            margin: 0.4vh 0.3vw;
            background: #249c0c;
            color: #fff;
            padding: 0.2vh 0.4vw;
            font-size: 1vw;
            border-radius: 0.5vw;
        }
    }
`;
